<style lang="stylus" scoped>
bgBlue = linear-gradient(to right, #04befe, #4481eb);

.box {
  background: #f5f5f5;
  height: 100%;
  margin-bottom: 100px;
}

.banner {
  background: bgBlue;
  height: 16rem;
  padding: 6rem 0 0 0;

  .sbutit {
    font-size: 2rem;
    letter-spacing: 1.5rem;
    color: #ffffff;
    background: bgBlue;
    width: 100%;
    height: 8rem;
    text-indent: 3rem;
  }

  h2 {
    color: #ffffff;
    font-size: 5rem;
    text-indent: 1.5rem;
  }
}

.banner2 {
  display: inline-block;
  width: 100%;
  // height 5rem
}

.line1 {
  background: #fff;
  font-size: 1.7rem;
  line-height: 3.5;
  padding-left: 1.5rem;

  i {
    color: #666;
    font-size: 1.5rem;
    font-style: normal;
    padding-left: 1rem;
  }

  em {
    color: #c55;
    font-size: 1.4rem;
    font-style: normal;
    float: right;
    margin: 0 1rem 0 0;
  }

  .btn {
    line-height: 1.3rem;
    float: right;
    margin: 1.5rem 1.5rem;
    background: bgBlue;
  }

  .btn2 {
    float: right;
    color: #4481eb;
    border: 1px solid #4481eb;
    line-height: 1.3rem;
    margin: 1.5rem 1.5rem;
  }

  span {
    display: inline-block;
    float: left;
    width: 33%;
    overflow: hidden;
    line-height: 1.6;
    color: #999;
    font-size: 1.4rem;
    text-align: center;
  }

  .btit {
    font-size: 1.8rem;
  }
}

.line2 {
  margin: 1rem 0 0 0;
  background: #fff;
  height: 13rem;
}

.line3 {
  text-align: center;
  margin: 2.5rem 0 2.5rem 0;
}

.box1 {
  background: #ffffff url('./imgs/bg2.png') 66% 38% no-repeat;
  background-size: 75% 38%;
  border-radius: 5px;
  margin: 2rem 1rem 3rem 1rem;
  height: 370px;

  .text1 {
    display: inline-block;
    width: 80%;
    margin: 35px 0 5px 4%;
  }

  .text2 {
    font-size: 1.8rem;
    width: 80%;
    margin: 0 auto;

    i {
      // color: #ff0;
      font-style: normal;
    }
  }

  .btn3 {
    width: 92%;
    background: bgBlue;
    margin: 50px 4% 0 4%;
    font-size: 1.8rem;
    line-height: 2;
  }

  .text3 {
    font-size: 1.4rem;
    text-align: center;
    line-height: 2.8;
  }
}
</style>

<template>
  <div class="box">
    <!-- 消息提示 -->
    <Modal
        title=""
        v-model="msgShow"
        :mask-closable="false"
        @on-ok="okHandle">
        <p>是否确认申请信用卡代还业务？</p>
    </Modal>
    <div class="banner">
      <h2>轻松还卡</h2>
      <p v-show="!this.$store.state.show" class="sbutit">精细养卡模式</p>
    </div>
    <div v-show="!this.$store.state.show">
      <div class="box1">
        <img class="text1" src="./imgs/bg4.png" alt="">
        <p class="text2">用<i>5%</i>的余额 还清本期账单 有助提额比银行分期省<i>70%</i> 比网络代还省<i>50%</i></p>
        <Button class="btn3" type="success" long>添加信用卡</Button>
        <p class="text3">精养信用卡，立竿见影</p>
      </div>
    </div>
    <div v-show="this.$store.state.show">
      <p class="line1">
        还卡MPOS<i>领取专用还卡MPOS</i>
        <Button class="btn" type="primary" shape="circle" @click="okHandle">点击前往</Button>
      </p>
      <p class="line1 line2 " v-for="item in cardList" :key="item.cardId">
        {{item.bankName}}<i> （{{formatBankNumber(item.cardNumber)}}）</i> <em @click="delBank(item.cardId)">删除</em><br/>
        <span class="btit">每月{{item.statementDate}}日</span><span class="btit">每月{{item.repaymentDate}}日</span>
        <Button class="btn2" shape="circle" @click="goRepay">代还申请</Button>
        <span>账单日</span><span>还款日</span>
      </p>
      <router-link to="/AddCard">
        <p class="line1 line3">+ 添加信用卡</p>
      </router-link>
    </div>
    <img class="banner2" src="./imgs/banner@2x.png" alt="">
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Repayment",
  components: {},
  data() {
    return {
      cardList: [],
      msgShow:false
    };
  },
  methods: {
    formatBankNumber(bankNumber) {
      return bankNumber.substr(0, 4) + "*****" + bankNumber.substr(-4);
    },
    //liebiao
    list(){
      var _this = this;
    axios
      .post("/web/api/card/cardList", {
        userId: this.$store.state.user.userId
      })
      .then(function(res) {
        var data = res.data.date;
        console.log(data);
        _this.cardList = data;
        // console.log(data);
      })
      .catch(function(error) {
        console.log(error);
      });
    },
    // 删除信用卡
    delBank(id){

      this.$Modal.confirm({
          title: '提示框',
          content: '<p>删除后将无法恢复，您确定要删除吗？</p>',
          loading: true,
          onOk: () => {
              setTimeout(() => {
                    this.$Modal.remove();
                    var _this = this;
                    axios
                    .post("/web/api/card/delete", {
                      cardId: id
                    })
                    .then(function(res) {
                      var data = res.data.date;
                      console.log("删除:",data);
                      // console.log(data);
                      _this.list()
                    })
                    .catch(function(error) {
                      console.log(error);
                    });
              }, 500);
          }
      });


    },
    goRepay(){
      this.msgShow=true
    },
    okHandle(){
      console.log('联系客服')
      this.$router.push('customerservice')
    }
  },
  created() {
    this.list()
  }
};
</script>

